<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app clipped>
      <v-list dense>
        <div v-for="item in menuTree" :key="item.id">
          <v-list-group :value="true" no-action sub-group v-if="isHasMenu(item.id)">
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item-content>
            </template>

            <div v-for="child in item.children" :key="child.id">
              <v-list-item link v-if="isHasMenu(child.id)">
                <v-list-item-title @click="goRouter(child)">{{
                  child.title
                }}</v-list-item-title>
              </v-list-item>
            </div>
          </v-list-group>
        </div>
        <v-list-item @click="deldialog = true">
          <v-list-item-action>
            <v-icon>mdi-shield-account-outline</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>退出登录</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app clipped-left>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title
        >飞燕齿科管理后台[{{ LOGIN_INFO.name }}-{{
          LOGIN_INFO.username
        }}]</v-toolbar-title
      >
    </v-app-bar>

    <v-main>
      <v-container>
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer app>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>

    <v-dialog v-model="deldialog" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">提示</v-card-title>
        <v-card-text><p class="mt-5">确认退出？</p></v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click="deldialog = false"
            >取消</v-btn
          >
          <v-btn color="green darken-1" text @click="outAccount()">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</template>
<script>
import routerTool from "@/router/vouter.tools";

export default {
  name: "Home",
  props: {
    source: String,
  },
  data() {
    return {
      changePasswordVisible: false,
      collapsed: false,
      menuTree: [],
      accountMenu: [],
      oldPassword: "",
      newPassword: "",
      queryPassword: "",
      login_info: {},
      activeKey: 0,
      panes: [],

      drawer: null,
      deldialog: false,
      currentSaleId: "",
      LOGIN_INFO: null,
    };
  },
  created() {
    this.LOGIN_INFO = JSON.parse(sessionStorage.getItem("LOGIN_INFO"));
    this.$vuetify.theme.dark = false;
    this.currentSaleId = JSON.parse(
      sessionStorage.getItem("LOGIN_INFO")
    ).saleId;

    this.menuTree = routerTool.getMenuTree();
    this.panes = [
      {
        title: this.menuTree[0].children[0].title,
        path: this.menuTree[0].children[0].path,
      },
    ];
    this.login_info = JSON.parse(sessionStorage.getItem("LOGIN_INFO"));
    this.accountMenu = this.login_info.group.menu.split(",");
  },
  methods: {
    // goRouter(url) {
    //   if (this.$route.path.slice(1) == url) {
    //     return;
    //   } else {
    //     this.$router.push(url);
    //   }
    // },

    outAccount() {
      sessionStorage.setItem("LOGIN_INFO", "");
      this.$router.replace("/");
    },
    isHasMenu(id) {
      let is;
      if (id.split("-").length === 1) {
        // 一级菜单
        is =
          this.accountMenu.filter((i) => {
            return i.split("-")[0] == id;
          }).length > 0;
      } else if (id.split("-").length === 2) {
        // 二级
        is =
          this.accountMenu.filter((i) => {
            return i == id;
          }).length > 0;
      }
      return is;
    },

    goRouter(item) {
      const filter = this.panes.filter((i) => {
        return i.path == item.path;
      });
      if (filter.length > 0) {
        let _index;
        this.panes.forEach((i, index) => {
          if (i.path == item.path) {
            _index = index;
          }
        });
        this.activeKey = _index;
      } else {
        this.panes.push({
          title: item.title,
          path: item.path,
        });
        this.activeKey = this.panes.length - 1;
      }
      this.$router.push(item.path);
    },

    onChange(targetKey) {
      this.activeKey = targetKey;
      this.$router.push(this.panes[targetKey].path);
    },

    onEdit(targetKey, action) {
      switch (action) {
        case "remove":
          this.panes.splice(targetKey, 1);
          break;

        default:
          break;
      }
    },

    handleMenuClick(event) {
      const _this = this;
      switch (event.key.toString()) {
        case "1":
          // 修改密码
          this.changePasswordVisible = true;
          break;
        case "2":
          // 退出登录
          this.$confirm({
            content: "是否确认退出？",
            onOk() {
              sessionStorage.removeItem("LOGIN_INFO");
              sessionStorage.removeItem("TOKEN");
              _this.$router.replace("/");
            },
          });
          break;
      }
    },

    handleCancel() {
      this.changePasswordVisible = false;
      this.oldPassword = "";
      this.newPassword = "";
      this.queryPassword = "";
    },

    handleOk() {
      if (!this.oldPassword || !this.newPassword || !this.queryPassword) {
        this.$Message.error("请将内容填入完整！");
        return;
      }
      if (this.newPassword !== this.queryPassword) {
        this.$Message.error("两次输入的新密码不一致！");
        return;
      }
      this.Http.post("/admin/admin/password", {
        oldpassword: this.oldPassword,
        password: this.newPassword,
        queryPassword: this.queryPassword,
      }).then((res) => {
        if (res.code === 1) {
          this.$Message.success(res.msg);
          this.handleCancel();
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style>
.ant-layout {
}

#components-layout-demo-side .logo img {
  width: 100%;
  padding: 20px;
}

.layout-sider {
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
}

.layout-sider::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.layout-sider::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0.05) 75%,
    transparent 75%,
    transparent
  );
}

.layout-sider::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.03);
  background: #ededed;
  border-radius: 3px;
}

.ant-layout-sider-children {
  height: auto;
}

.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: 0px;
}

.layout-content {
  transition: all 0.2s;
}
</style>
